import React, { useEffect, useState } from "react";
import { Button, Card, message, Space, Table } from "antd";
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
import { addProduct, deleteProduct, getProductList, updateProduct } from "@/api/sph";
import ProductSetModal from "@/pages/product/trademark/ProductSetModal";

export interface DataType {
    logoUrl: string;
    tmName: string;
    id: string;
}

const { Column } = Table;

function Trademark() {
    // 品牌列表
    const [productList, setProductList] = useState([]);
    // 分页
    const [pageInfo, setPageInfo] = useState({
        current: 1,
        pageSize: 5,
        total: 0,
    });

    // 获取品牌列表
    const getProductListAsync = async () => {
        try {
            const res = await getProductList(1, 5);
            const { records, total, current, size } = res.data;
            setProductList(records);
            setPageInfo({
                current,
                pageSize: size,
                total,
            });
        } catch (e: any) {
            message.error(e.message);
        }
    };

    // modal
    const [modalVisible, setModalVisible] = useState(false); // 控制modal的显示与隐藏
    const [modalTitle, setModalTitle] = useState(""); // modal的标题
    const [modalData, setModalData] = useState({}); // modal的数据

    // 添加品牌
    const addProductAsync = async (values: any) => {
        try {
            addProduct(values).then((res) => {
                setModalVisible(false);
                getProductListAsync();
            });
        } catch (e: any) {
            message.error(e.message);
        }
    };
    // 修改品牌
    const updateProductAsync = async (values: any) => {
        try {
            updateProduct(values).then(() => {
                setModalVisible(false);
                getProductListAsync();
            });
        } catch (e: any) {
            message.error(e.message);
        }
    };
    // 添加或修改品牌
    const handleOk = (values: any) => {
        if (modalTitle === "添加品牌") {
            addProductAsync(values);
        } else {
            updateProductAsync(values);
        }
    };
    // 删除品牌
    const deleteProductAsync = async (id: number) => {
        try {
            deleteProduct(id).then(() => {
                message.success("删除成功");
                getProductListAsync();
            });
        } catch (e: any) {
            message.error(e.message);
        }
    };

    // 初始获取品牌列表
    useEffect(() => {
        getProductListAsync();
    }, []);

    return (
        <div style={{ margin: 20 }}>
            <Card>
                <div style={{ marginLeft: 20 }}>
                    <Button
                        type="primary"
                        onClick={() => {
                            setModalTitle("添加品牌");
                            setModalVisible(true);
                            setModalData({
                                logoUrl: "",
                                tmName: "",
                            });
                        }}
                    >
                        添加
                    </Button>
                </div>
                <div style={{ margin: 20 }}>
                    <Table
                        dataSource={productList}
                        rowKey={"id"}
                        pagination={{
                            ...pageInfo,

                            onChange: (page, pageSize) => {
                                getProductList(page, pageSize).then((res) => {
                                    const { records, total, current, size } = res.data;
                                    setProductList(records);
                                    setPageInfo({
                                        current,
                                        pageSize: size,
                                        total,
                                    });
                                });
                            },
                        }}
                    >
                        <Column title="序号" dataIndex="id" key="id" />
                        <Column title="品牌名称" dataIndex="tmName" key="tmName" />
                        <Column
                            title="品牌LOGO"
                            key="logoURl"
                            render={(text, record: DataType) => {
                                return <img alt="" src={record.logoUrl} width={100} height={100} />;
                            }}
                        ></Column>
                        <Column
                            title="操作"
                            key="id"
                            render={(record) => (
                                <Space size="middle">
                                    <Button
                                        type="primary"
                                        icon={<EditOutlined />}
                                        onClick={() => {
                                            setModalTitle("修改品牌");
                                            setModalVisible(true);
                                            setModalData({ ...record });
                                        }}
                                    ></Button>
                                    <Button
                                        type="primary"
                                        danger
                                        icon={<DeleteOutlined />}
                                        onClick={() => {
                                            deleteProductAsync(record.id);
                                        }}
                                    ></Button>
                                </Space>
                            )}
                        />
                    </Table>
                </div>
                <ProductSetModal
                    modalTitle={modalTitle}
                    modalVisible={modalVisible}
                    modalData={modalData}
                    setModalVisible={setModalVisible}
                    handleOk={handleOk}
                ></ProductSetModal>
            </Card>
        </div>
    );
}

export default Trademark;
